<template>
		<div class="card rdsp-card-view" data-page="fireSys">
			<div class="card-content card-content-padding">
				<div class="row fireSys-card-top">
					<span class="rdsp-card-title">消防系统</span>
					<div class="fireSys-card-top-right">
						<span class="all-fireSys-num">消防系统: <span id="fireSystem"></span></span>
						<span class="all-fireSys-num">探测器: <span id="detector"></span></span>
					</div>
				</div>
				<div class="list accordion-list fireSys-list">
					<ul>

			    		</ul>
			    	</div>
			    </div>
			    <!--更多按钮-->
			    <a href="/moreFireSys/" class="morelist"  data-view=".view-main">
			    	<i class="iconfont app-icon-down icon-xiala"></i>
			    </a>
			</div>
	</template>
	<style scoped>
	.my-icon{
		font-size: 12px;
	}
	.fireSys-card-top{
		height: 50px;
	}
	.fireSys-card-title{
		font-size: 15px;
		font-weight: bold;
	}
	.all-fireSys-num{
		color: #868686;
		font-size: 12px;
		margin-left: 8px;
	}
	.all-fireSys-num span{
		color: #3d3d3d;
	}
	.fireSys-card-top-right{

	}
	.fireSys-list .item-inner, .fireSys-list .row{
		width: 100%;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.fireSystem-name{
		height: 18px;
		font-size: 14px;
	}
	.fireSystem-num{
		font-size: 12px;
		margin-top: 5px;
		color: #868686;
	}
	.fireSystem-num-cont{
		float: left;
		margin-right: 12px;
	}
	.fireSystem-list img{
		border-radius: 30px;
	}
	.fireSys-list ul:before{ 
		width:0px !important;
	}
	.fireSystem-list-row{
		height: 35px;
		line-height: 35px;
		color: #666;
	}
	.fireSystem-list-row .col-33{
		float: left;
		font-size: 14px;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fireSystem-list-row .col-66{
		float: right;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fireSystem-list-row .col-66 div{
		width: 65px;
		height: 22px;
		line-height: 22px;
		border-radius: 2px;
		background-color: #e1e1e1;
		font-size: 12px;
		display: inline-block;
		text-align: center;
	}
	.fireSystem-nodeList{
		margin-top: 5px !important;
	}
	.fireSystem-list .item-media{
		padding-top: 5px;
	}

</style>
<script>
	return {
		beforeCreate() {
			var self = this;
			self.getBuildData();
		},
		methods: {
			getBuildData:function(){
				var self = this;
				var $ = self.$$;
                var id_org="";
                if (single_Orgid == "") {id_org=userInfor.organizationIds;}else {id_org=single_Orgid;}
				Dao.getFireSysData({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    organizationId: id_org,
                    type:1,
				},function(data){
					if(data){
       					$(".fireSys-list ul").empty();
       					$("#fireSystem").html(data.length);
       					var detectorNum=0;
       					var lone_num=0;
       					if (data.length>2){
       					    lone_num=3;
						}else{
       					    lone_num=data.length;
						}
       					for(var i=0;i < data.length; i++){
       						detectorNum=detectorNum+data[i].facsTotal*1;
       					}

       					$("#detector").html(detectorNum);
       					if(data && data.length>0){
       						for(var i=0;i < lone_num; i++){
                                var iconim="";
                                if (data[i].systemUrl!=""){
                                    iconim=data[i].systemUrl;
                                }else{
                                    iconim=staticPath + "img/UnitRealtimeState/unit_all.png";
                                }
       							$(".fireSys-list ul").append(`<li class="accordion-item accordion-item-list-sys">
       								<a href="#" class="item-link item-content">
       								<div class="item-media">
       								<img src="`+iconim+`" style="width: 39px;height: 39px">
       								</div>
       								<div class="item-inner">
       								<div class="row fireSystem-name">`+data[i].systemName+`</div>
       								<div class="row fireSystem-num">	
       								<div class="fireSystem-num-cont">
       								<i class="f7-icons my-icon" style="color: #fc4962;">circle</i>	
       								<span class="fireSystem-list-police-name">报警</span><span>`+data[i].fireNum+`</span>
       								</div>
       								<div class="fireSystem-num-cont">
       								<i class="f7-icons my-icon" style="color: #ffcd65;">circle</i>	
       								<span class="fireSystem-list-police-name">故障</span><span>`+data[i].faultNum+`</span>
       								</div>
       								<div class="fireSystem-num-cont">
       								<i class="f7-icons my-icon" style="color: #c8c6c7;">circle</i>	
       								<span class="fireSystem-list-police-name">屏蔽</span><span>`+data[i].shieldNum+`</span>
       								</div>
       								<div class="fireSystem-num-cont">
       								<i class="f7-icons my-icon" style="color: #37ef7d;">circle</i>	
       								<span class="fireSystem-list-police-name">正常</span><span>`+data[i].normalNum+`</span>
       								</div>
       								</div>
       								</div>
       								</a>
       								<div class="accordion-item-content">
       								<div class="block fireSystem-nodeList">
       								</div>
       								</div>
       								</li>`);
       							if(data[i].fireCtlFacsCategoryStatuCountDtos && data[i].fireCtlFacsCategoryStatuCountDtos.length>0){
       								var fireNodeList = data[i].fireCtlFacsCategoryStatuCountDtos;
	       							var fireSysNodeList=$(".fireSystem-nodeList").eq(i);
	       							fireSysNodeList.html("");
	       							// $(".fireSystem-nodeList").empty();
	       							for(var j=0; j<fireNodeList.length;j++){
	       								fireSysNodeList.append(`<div class="row fireSystem-list-row" id="fireSystem_list_`+fireNodeList[j].fcfCategoryId+`">
	       									<div class="col-33">`+fireNodeList[j].fcfCategoryName+`</div>
	       									<div class="col-66">
	       									<div >报警`+fireNodeList[j].alertNum+`</div>
	       									<div>故障`+fireNodeList[j].faultNum+`</div>
	       									<div><a href="#" data-view=".view-main" style="color: #666;">屏蔽`+fireNodeList[j].shieldingNum+`</a>
	       									</div>
	       									</div>
	       									</div>`);
	       							}
	       						}
	       					}
	       					$(".fireSys-list li").eq(data.length-1).addClass('accordion-item-opened');
	       					if (screen.width <= 375) {
		                        $(".fireSystem-list-police-name").hide();
		                    }
	       				}
	       			}
	       		});
			}
		}
 	}
</script>